<template>
  <div class="wsc_content">
    <!-- 查询框1 -->
    <div class="wsc_cxk_content">
      <div class="kclx">
        <label for="id_1">课程类型</label>
        <el-select v-model="query.shop_type" placeholder="请选择" id="id_1">
          <el-option
            v-for="item in course_name"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="kclx">
        <label for="id_2">订单状态</label>
        <el-select
          v-model="query.order_mix_status"
          placeholder="请选择"
          id="id_2"
        >
          <el-option
            v-for="item in ddzt"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="kclx">
        <label for="id_3">支付类型</label>
        <el-select v-model="query.order_type" placeholder="请选择" id="id_3">
          <el-option
            v-for="item in zflx"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="kclx">
        <label for="id_4">下单时间</label>
        <div class="block">
          <el-date-picker
            v-model="query.created_end"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- 查询2 -->
    <div class="wsc_content_input">
      <div class="input1">
        <label for="f1">商品名称</label>
        <el-input placeholder="请输入内容" v-model="query.shop_name" id="fl">
        </el-input>
      </div>
      <div class="input1">
        <label for="f2">订单编号</label>
        <el-input placeholder="请输入内容" v-model="query.order_number" id="f2">
        </el-input>
      </div>
      <div class="input1">
        <label for="f3">手机号</label>
        <el-input placeholder="请输入内容" v-model="query.mobile" id="f3">
        </el-input>
      </div>
      <div class="input2">
        <el-button> 搜索</el-button>
        <el-button>重制</el-button>
      </div>
    </div>

    <!-- 操做栏 -->
    <div class="wsc_content_">
      <el-button type="primary">批量导出</el-button>
      <el-button type="primary">批量导入</el-button>
      <el-button type="primary">批量发货</el-button>
      <el-button type="primary"  @click="$router.push({name:'FinanceOrderCourseRepore'})">查看报表</el-button>
    </div>
    <!-- 表格展示 -->

    <div class="wsc_data_w">
      <div class="wsc_data_n">
        <!-- 头部 -->
        <div class="head">
          <div>商品名称</div>
          <div>单价(元)/数量</div>
          <div>订单金额</div>
          <div>订单状态</div>
          <div>退款维权</div>
          <div>买家</div>
          <div>买家手机号</div>
          <div>实父金额</div>
          <div>操作</div>
        </div>
        <div class="box" v-for="(item, i) in list" :key="i">
          <!-- 内容 -->
          <div class="neiron">
            <div>
              <span>订单编号:</span>{{ item.order_number }}<span></span>
            </div>
            <div><span>下单时间: </span><span></span></div>
            <div><span>支付类型:</span><span>在线支付</span></div>
          </div>
          <!-- 内容2 -->
          <div class="neiron2">
            <div>{{ item.shop_name }}</div>
            <div></div>
            <div>{{ item.order_price }}</div>
            <div>{{ item.order_mix_status }}</div>
            <div>{{ item.pay_name }}</div>
            <div>{{ item.nickname }}</div>
            <div>{{ item.mobile }}</div>
            <div>0.00</div>
            <div>订单详情</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页切换 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { order, config } from "../../api.js";
export default {
  data() {
    return {
      msg: "",
      value0: "",
      course_name: [],
      total: 0,
      ddzt: [
        "待支付",
        "待发货",
        "已发货",
        "已完成",
        "已关闭",
        "退款申请中",
        "退款中",
        "退款失败",
      ],
      list: [],
      zflx: [
        "微信",
        "支付宝",
        "虚拟币支付",
        "苹果支付",
        "赠送",
        "优惠卷支付",
        "线下支付",
      ],

      query: {
        created_end: "", //结束时间
        created_start: "", //开始时间
        limit: 100, //条数
        mobile: "", //手机号
        order_mix_status: "", //订单/混合/状态
        order_number: "", //订单编号
        order_type: "", //订单类型
        page: 4, //页码
        pay_status: "", //商品状态
        pay_type: "", //商品类型
        ship_status: "", //商品状态
        shop_name: "", //商品名字
        shop_type: "", //商品类型
        teacher_name: "", //教师名字
      },
    };
  },

  created() {
    this.getlist();
    config().then((res) => {
      this.course_name = res.data.course_name;
    });
  },
  watch: {
    query: {
      deep: true,
      handler: function () {
        this.getlist();
      },
    },
  },
  methods: {
    getlist() {
      order(this.query).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        console.log(this.list);
      });
    },
    handleSizeChange(val) {
      // 更新每页的条数
      this.query.limit = val;
      // this.getlist();
    },
    handleCurrentChange(val) {
      // 点击改变页数

      this.query.page = val;
      // this.getlist();
    },
  },
};
</script>

<style lang='scss'>
.wsc_content {
  .wsc_cxk_content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    .kclx {
      width: 25%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      label {
        color: rgb(179, 146, 146);
      }
    }
  }
  .wsc_content_input {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .input1 {
      width: 25%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .el-input {
        width: 221.4px;
      }
    }
  }
  .wsc_content_ {
    display: flex;
    align-items: center;
    height: 80px;
    // border: 1px solid red;
  }
  .wsc_data_w {
    width: 100%;
    .wsc_data_n {
      width: 100%;
      .head {
        width: 100%;

        display: flex;
        justify-content: space-around;
        align-items: center;
        background: rgb(228, 231, 224);
        color: rgb(8, 8, 8);
        height: 50px;

        div {
          width: 11%;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
        }
      }

      .box {
        .neiron {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          background-color: #f8f8f9;
          div {
            padding: 0px 10px;
            font-size: 13px;
          }
        }
        .neiron2 {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background: rgb(230, 226, 226);
          div {
            width: 11%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
